<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import api from '@/api/index.js'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
const emits = defineEmits(['close', 'init', 'reload'])
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  }
})

// 弹窗标题
const title = ref('授权')
// 表单数据
const formData = ref({})
// 同步表格数据到表单数据内
watch(
  () => props.curRow,
  async (val) => {
    formData.value = val
  },
  { deep: true, immediate: true }
)
// 是否显示弹窗
const show = ref(false)
// 弹窗显示状态切换时触发
const afterOpenChange = (bool) => {
  if (!bool) {
    emits('close')
  }
}
// 提交按钮loading状态
const submitLoading = ref(false)
// 编辑数据
const setAdmin = async () => {
  submitLoading.value = true
  const params = {
    memId: formData.value.memId,
    status: formData.value.isAdmin === 1 ? 0 : 1
  }
  await api.setAdmin(params)
  message.success('设置成功')
  formData.value.isAdmin = params.status

  setTimeout(() => {
    submitLoading.value = false
  }, 30)
  emits('reload')
}
// 编辑数据
const setCgy = async () => {
  submitLoading.value = true
  const params = {
    memId: formData.value.memId,
    status: formData.value.isPurchaser === 1 ? 0 : 1
  }
  await api.setPurchaser(params)
  message.success('设置成功')
  formData.value.isPurchaser = params.status
  setTimeout(() => {
    submitLoading.value = false
  }, 30)
  emits('reload')
}
const autoUser = ref(false)
let changeAuto = ''
let number = null
//关闭对应权限
const setUser = async (auto, num) => {
  changeAuto = auto
  number = num
  const index = formData.value[auto]
  if (index === 0 || index === 2) {
    message.warning('请在小程序中申请')
  } else {
    autoUser.value = true
  }
}

//确定关闭权限
const handleOk = async () => {
  const params = {
    memId: formData.value.memId,
    type: number
  }
  submitLoading.value = true
  autoUser.value = false
  setTimeout(() => {
    submitLoading.value = false
  }, 30)
  await api.setUserAuto(params)
  message.success('设置成功')
  formData.value[changeAuto] = 0
  emits('reload')
}
// 打开弹窗
const open = () => {
  show.value = true
}
// 关闭弹窗
const close = () => {
  show.value = false
}
// 提交表单
defineExpose({ open })
</script>

<template>
  <a-drawer
    :maskClosable="false"
    :closable="false"
    destroyOnClose
    v-model:open="show"
    class="custom-class"
    root-class-name="root-class-name"
    :title="title"
    placement="right"
    @after-open-change="afterOpenChange"
  >
    <a-alert message="点击开关即可切换权限状态" show-icon />
    <div style="margin: 20px 0">
      <span style="cursor: pointer" @click.stop="setAdmin">
        <a-switch
          style="pointer-events: none"
          v-model:checked="formData.isAdmin"
          checked-children="管理员"
          un-checked-children="非管理员"
          :checkedValue="1"
          :unCheckedValue="0"
        />
      </span>
    </div>
    <div style="margin: 20px 0">
      <span style="cursor: pointer" @click.stop="setCgy">
        <a-switch
          style="pointer-events: none"
          v-model:checked="formData.isPurchaser"
          checked-children="采购专员"
          un-checked-children="非采购专员"
          :checkedValue="1"
          :unCheckedValue="0 || 2"
        />
      </span>
    </div>
    <div style="margin: 20px 0">
      <span style="cursor: pointer" @click.stop="setUser('isDriver', 1)">
        <a-switch
          style="pointer-events: none"
          v-model:checked="formData.isDriver"
          checked-children="农机操作手"
          un-checked-children="非农机操作手"
          :checkedValue="1"
          :unCheckedValue="0 || 2"
        />
      </span>
    </div>
    <div style="margin: 20px 0">
      <span style="cursor: pointer" @click.stop="setUser('isRepairman', 2)">
        <a-switch
          style="pointer-events: none"
          v-model:checked="formData.isRepairman"
          checked-children="农机维修员"
          un-checked-children="非农机维修员"
          :checkedValue="1"
          :unCheckedValue="0 || 2"
        />
      </span>
    </div>
    <div style="margin: 20px 0">
      <span style="cursor: pointer" @click.stop="setUser('isVillageCadres', 3)">
        <a-switch
          style="pointer-events: none"
          v-model:checked="formData.isVillageCadres"
          checked-children="村级干部"
          un-checked-children="非村级干部"
          :checkedValue="1"
          :unCheckedValue="0 || 2"
        />
      </span>
    </div>
    <template #footer>
      <a-button type="primary" @click="close">关闭</a-button>
    </template>
  </a-drawer>
  <a-modal v-model:open="autoUser" @ok="handleOk">
    <template #title
      ><div><InfoCircleOutlined style="color: gold" /> 提示</div>
    </template>
    <p>关闭后，用户将不具备该权限，需重新申请后才能获取，确认关闭吗？</p>
  </a-modal>
</template>